<div class="po-page-change-password-wrapper" #pageChangePassword>
  <div class="po-page-change-password-container">
    <po-page-background
      class="po-page-change-password"
      [p-components-size]="componentsSize"
      [p-logo]="logo"
      [p-secondary-logo]="secondaryLogo"
    >
      <div class="po-page-blocked-user-header po-row">
        <div class="po-md-12">{{ literals.createNewPassword }}</div>
        <div class="po-md-12 po-text-center po-font-text">
          {{ literals.createNewPasswordPhrase }}
        </div>
      </div>

      <form #passwordForm="ngForm">
        <div class="po-row po-mt-3 po-mt-sm-1">
          <div class="po-md-6" [ngClass]="{ 'po-offset-md-3 po-offset-lg-3 po-offset-xl-3': !showRequirements }">
            @if (!hideCurrentPassword) {
              <div>
                <po-password
                  name="currentPassword"
                  [(ngModel)]="currentPassword"
                  p-required
                  [p-label]="literals.currentPassword"
                  [p-no-autocomplete]="noAutocompletePassword"
                  [p-size]="componentsSize"
                >
                </po-password>
              </div>
            }
            @if (!hideCurrentPassword && recovery) {
              <div class="po-text-center po-mb-sm-1 po-mb-2">
                @if (recoveryUrlType === 'internalLink') {
                  <a class="po-font-text-bold po-page-change-password-forgot-password" [routerLink]="recovery">
                    {{ literals.forgotPassword }}
                  </a>
                }
                @if (recoveryUrlType === 'externalLink') {
                  <a class="po-font-text-bold po-page-change-password-forgot-password" [href]="recovery">
                    {{ literals.forgotPassword }}
                  </a>
                }
                @if (!recoveryUrlType) {
                  <a
                    class="po-font-text-bold po-page-change-password-forgot-password po-clickable"
                    (click)="onForgotPasswordClick(recovery)"
                  >
                    {{ literals.forgotPassword }}
                  </a>
                }
              </div>
            }
            <div>
              <po-password
                name="newPassword"
                [(ngModel)]="newPassword"
                p-required
                [p-label]="literals.newPassword"
                (p-change-model)="validatePassword()"
                [p-no-autocomplete]="noAutocompletePassword"
                [p-size]="componentsSize"
              >
              </po-password>
            </div>
            <div>
              <po-password
                name="confirmPassword"
                [(ngModel)]="confirmPassword"
                p-required
                [p-label]="literals.confirmPassword"
                (p-change-model)="validatePassword()"
                [p-no-autocomplete]="noAutocompletePassword"
                [p-size]="componentsSize"
              >
              </po-password>
            </div>
          </div>
          @if (showRequirements) {
            <div class="po-md-6 po-page-change-password-required-container">
              <po-container>
                <ul class="po-page-change-password-required-list">
                  <li class="po-page-change-password-required-item">
                    <p class="po-mb-1 po-font-text-bold po-page-change-password-required-title">
                      {{ literals?.requirements }}
                    </p>
                  </li>
                  @for (requirement of requirements; track requirement) {
                    <li class="po-page-change-password-required-item">
                      <po-icon
                        class="po-icon po-page-change-password-required-icon"
                        [p-icon]="
                          validateRequirement(requirement)
                            ? 'ICON_OK po-page-change-password-required-ok'
                            : 'ICON_MINUS po-page-change-password-required-minus'
                        "
                      >
                      </po-icon>
                      <p class="po-page-change-password-required-text po-font-text">
                        {{ requirement.requirement }}
                      </p>
                    </li>
                  }
                </ul>
              </po-container>
            </div>
          }
        </div>
      </form>

      <po-divider class="po-sm-12"></po-divider>

      <div class="po-page-change-password-tips po-row">
        <div class="po-md-2 po-mr-3">
          <img
            class="po-page-change-password-lock-image po-mb-3"
            alt="Blocked user image"
            src="./assets/images/big-lock.svg"
          />
        </div>
        <div class="po-md-9 po-page-change-password-tips-text">
          <div class="po-font-text-bold po-pb-1">{{ literals.safetyTips }}</div>
          <div class="po-font-text-small">
            <div class="po-row po-pb-1">{{ literals.safetyTipsPhrase }}</div>
            <div class="po-row po-pb-1">• {{ literals.safetyTipsFirst }}</div>
            <div class="po-row po-pb-1">• {{ literals.safetyTipsSecond }}</div>
            <div class="po-row po-pb-1">• {{ literals.safetyTipsThird }}</div>
          </div>
        </div>
      </div>

      <div class="po-page-change-password-buttons po-row">
        <po-divider class="po-sm-12 po-mobile-only"></po-divider>

        @if (!hideCurrentPassword) {
          <po-button
            class="po-sm-6 po-mb-sm-1"
            [p-label]="literals.backButton"
            [p-size]="componentsSize"
            (p-click)="navigateTo(urlBack)"
          >
          </po-button>
        }

        <po-button
          [ngClass]="hideCurrentPassword ? 'po-md-12' : 'po-sm-6'"
          p-kind="primary"
          [p-disabled]="passwordForm.invalid"
          [p-label]="literals.saveButton"
          [p-size]="componentsSize"
          (p-click)="onLoginSubmit()"
        >
        </po-button>
      </div>
    </po-page-background>
  </div>
</div>

<po-modal
  [p-primary-action]="modalAction"
  p-hide-close
  p-size="auto"
  [p-components-size]="componentsSize"
  [p-title]="hideCurrentPassword ? literals.passwordSuccessfullyCreated : literals.passwordSuccessfullyUpdated"
>
  <div class="po-text-center">
    <img
      alt="Blocked user image"
      class="po-page-change-password-lock-image po-mb-3"
      src="./assets/images/success.svg"
    />
  </div>
</po-modal>
